<script setup>
import {onMounted, ref, watch} from 'vue'
import {getUser, submitAdvice, submitRoleInfo} from "../../../api/user/user.js";
import {Avatar, Iphone, Location, School, Timer} from "@element-plus/icons-vue";
import {getSchool, listSchool} from "../../../api/user/school.js";
import UpdateInformation from "./information/UpdateInformation.vue";
import router from "../../../router/index.js";
import {isPermission} from "../../../utils/utils.js";
import {ElNotification} from "element-plus";
import {useRouter} from "vue-router";


const user=ref({
  id: 0,
  username: "",
  password: "",
  phone: null,
  createTime: "",
  updateTime: "",
  role: 2,
  photoLink: '',
  headerLink: "",
  schoolId: '',
  schoolName: '',
  address:''
});
const nowPath = router.currentRoute.value.path.split('/').pop();
// 编辑资料状态
const isUpdate = ref(false)
// 权限数组
const role=ref(['学生','家长','老师','管理员','学校账号']);
// 导航栏默认导航栏
const activeIndex = ref(nowPath);
// 导航栏下表
let tabIndex = ref(nowPath);
// 学校认证弹出框是否弹出
let permissionProveDialog = ref(false);
// 认证到了第几步
let step = ref(1);
// 用户反馈内容
let userAdvice = ref();
// 用户反馈弹窗是否开启
let adviceDialogVisible = ref();
// 身份信息表格
let infoForm = ref({
  role: '',
  schoolName: '',
  no: '',
  phone: '',
  photoLink: '',
});
// 所有学校
let schoolList = ref([]);

// 导航栏点击事件
function handleTabClick(index) {
  if ( index === tabIndex.value ) {
    return;
  }
  tabIndex.value = index;
  if ( index === 'comprehensive' ) {
    router.push(`/student/space/information/comprehensive`);
  }
  if ( index === 'practiceCircumstance' ) {
    router.push(`/student/space/information/practiceCircumstance`);
  }
  if ( index === 'videoCircumstance' ) {
    router.push(`/student/space/information/videoCircumstance`);
  }
}
function handleUploadSuccess(file) {
  infoForm.value.photoLink = file.data;
}

// 打开编辑资料的弹窗
const handleUpdateInformation = () => {
  isUpdate.value = true;
}

function lastStep() {
  step.value -= 1;
}

function nextStep() {
  console.log(step.value)
  if (step.value === 2) {
    submitRoleInfo(infoForm.value).then(res => {
      console.log(res)
    });
    ElNotification.success({
      title: '提交成功',
      message: '您的身份信息已审核完毕',
      duration: 2000
    })
    permissionProveDialog.value = false;
    return;
  }
  step.value += 1;
}

function submitSuggestion() {
  adviceDialogVisible.value = false;
  submitAdvice(userAdvice.value).then(res => {
    ElNotification.success({
      title: '提交成功',
      message: '感谢您的反馈',
      duration: 2000
    })
  });
}

// 关闭窗口
const handleCloseUpdateInformation = () => {
  isUpdate.value = false;
  handleGetUser();
}


// 获取个人信息
const handleGetUser = async () => {
  await getUser().then((res) => {
    handleGetSchool();
    user.value = res.data;
    user.value.createTime = new Date(user.value.createTime).getFullYear();
  });
}

// 获取学校信息
const handleGetSchool = async () => {
  if (!isPermission('null')) {
    await getSchool(user.value.schoolId).then((res) => {
      user.value.schoolId = res.data.schoolId;
      user.value.schoolName = res.data.schoolName;
    })
  }
}

handleGetUser();

// 获取全部学校
listSchool().then(res => {
  schoolList.value = res.data;
  console.log(schoolList)
})

onMounted(() => {
  if (isPermission(0) ) {
    router.push(`/student/space/information/comprehensive`);
  }
})

</script>

<template>
  <div class="common-layout">
    <el-dialog
        v-model="adviceDialogVisible"
        title="用户反馈"
        width="500"
    >
      <el-input v-model="userAdvice" placeholder="请输入您的使用反馈及建议，我们会好好采纳"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="adviceDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitSuggestion">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="permissionProveDialog"
        title="家长认证"
        width="900"
    >
      <div>
        <el-steps style="max-width: 900px" :active="step" finish-status="success" simple>
          <el-step title="Step 1：填写信息"/>
          <el-step title="Step 2：上传证件照"/>
        </el-steps>
      </div>
      <div v-if="step === 1" class="user-fill-area">
        <el-form :model="infoForm" label-width="auto" style="width: 100%">
          <el-form-item label="学校名称：">
            <el-input v-model="infoForm.schoolName" placeholder="请输入您孩子的学校名"></el-input>
          </el-form-item>
          <el-form-item label="学号/学工号：">
            <el-input v-model="infoForm.no" placeholder="请填写您孩子的学号/学工号"></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="infoForm.phone" placeholder="请输入您的手机号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="step === 2" class="user-fill-area">
        <el-upload
            style="width: 100%"
            drag
            action="/api/user/upload"
            multiple
            :on-success="handleUploadSuccess"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            将证件照拖拽到此处 <em>或单击以上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="permissionProveDialog = false">取消</el-button>
          <el-button type="primary" @click="lastStep" :disabled="step === 1">上一步</el-button>
          <el-button type="primary" @click="nextStep">{{ step === 2 ? '提交' : '下一步' }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-container class="bottom-container">
      <el-header class="header">
        <div class="avatar-div">
          <!--          头像-->
          <el-avatar :size="100" :src="user.headerLink" class="avatar"/>
        </div>
        <div class="user-info">
          <div class="username-style">
            {{ user.username }}
            <div>
              <el-tag effect="dark" type="info" style="margin-left: 10px;">
                <el-icon>
                  <Avatar/>
                </el-icon>
                {{ role[user.role] }}
              </el-tag>
            </div>
          </div>
          <div class="no-style"><strong>学号：</strong>{{ user.no }}</div>
          <el-divider class="divider"></el-divider>
          <div class="other-info">
            <el-tag effect="dark" type="primary" class="tag">
                <el-icon size="15px" class="icon">
                  <School/>
                </el-icon>
              <div style="margin-left: 15px;">学校：{{ user.schoolName === null ? '暂未填写' : user.schoolName }}</div>
            </el-tag>
            <el-tag effect="dark" type="success" class="tag" style="margin-left: 15px;">
              <el-icon size="15px" class="icon">
                <Timer/>
              </el-icon>
              <div style="margin-left: 15px;">账号创建时间：{{ user.createTime === null ? '暂未填写' : user.createTime }}</div>
            </el-tag>
            <el-tag effect="dark" type="warning" class="tag" style="margin-left: 15px;">
              <el-icon size="15px" class="icon">
                <Location/>
              </el-icon>
              <div style="margin-left: 15px;">地址：{{ user.address === null ? '暂未填写' : user.address }}</div>
            </el-tag>
          </div>
          <div class="buttons">
            <el-button type="warning" v-if="isPermission('null')" @click="permissionProveDialog = true">家长认证
            </el-button>
            <el-button type="primary" @click="handleUpdateInformation()">编辑资料</el-button>
            <el-button type="success" @click="adviceDialogVisible = true">用户反馈</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleTabClick"
        >
          <el-menu-item index="comprehensive">综合情况</el-menu-item>
          <el-menu-item index="practiceCircumstance">练习情况</el-menu-item>
          <el-menu-item index="videoCircumstance">视频情况</el-menu-item>
        </el-menu>
        <div class="echarts-area">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </div>

  <UpdateInformation v-model="isUpdate" @close="handleCloseUpdateInformation"></UpdateInformation>
</template>

<style scoped lang="less">
.common-layout {
  width: 100%;
  height: 100%;
  .user-fill-area {
    width: 100%;
    margin-top: 15px;
    display: flex;

    .role-select {
      margin-top: 5px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .bottom-container {
    height: 100%;
    width: 100%;
    .header {
      display: flex;
      height: 40%;

      .avatar-div {
        height: 100%;
        width: 10%;
      }

      .user-info {
        height: 100%;
        width: 95%;
        position: relative;

        .username-style {
          font-size: 22px;
          font-weight: bold;
          display: flex;
        }

        .no-style {
          margin-top: 5px;
          font-size: 16px;
          color: #999999;
        }

        .divider {
          top: 40%;
          position: absolute;
        }

        .other-info {
          display: flex;
          margin-top: 15px;
          font-size: 18px;
          height: 100%;

          .tag {
            display: flex;
            position: relative;

            .icon {
              position: absolute;
            }
          }
        }

        .buttons {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }

    .main {
      width: 100%;
      height: 60%;

      .echarts-area {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>